package crew.blt.handsound.client.mvc.view.home;

import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.uibinder.client.UiHandler;
import com.google.gwt.uibinder.client.UiTemplate;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.Widget;

import crew.blt.handsound.client.mvc.model.Model;
import crew.blt.handsound.client.webgl.Scene;
import crew.blt.handsound.client.webgl.element.BoxElement;
import crew.blt.handsound.client.webgl.element.RotateElement;
import crew.blt.handsound.client.webgl.element.SphereElement;
import crew.blt.handsound.client.webgl.element.TranslateElement;
import crew.blt.handsound.shared.domain.User;

public class HomePage <M extends Model> extends IHomePage<M>
{

	@UiTemplate("HomePage.ui.xml")
	interface HomePageUIBinder extends UiBinder<Widget, HomePage> {}
	private static HomePageUIBinder uiBinder = GWT.create(HomePageUIBinder.class);

	@UiField Scene scene;
	@UiField Button btWebGLStart;
	@UiField Button btCreateScene;
	
	/**
	 * Constructor
	 */
	public HomePage() {
		initWidget(uiBinder.createAndBindUi(this));
	}
	
	@Override
	public Widget getWidgetPage() {
		return this;
	}

	@Override
	public void setUser(User user) {
		
	}
	

	//---------------------------------------------------------------------
	//-------------------------- Handler
	
	
	@UiHandler("btWebGLStart")
	void onBtWebGLStartClick(ClickEvent e){
		startWebGlOverFile(5,1);
	}

	@UiHandler("btCreateScene")
	void onBtCreateSceneClick(ClickEvent e){
		createScene();
	}

	private void createScene() {
		try{
		
			//Required
			scene.setId("theScene");
			scene.addElement(new RotateElement("pitch",true));
			scene.addElement(new RotateElement("yaw",true));
			
			//Custom
			//box 1
			scene.addElement(new TranslateElement("b1-t",true));
			scene.addElement(new RotateElement("b1-r",true));
//			scene.addElement(new BoxElement("b1",false));
			//sphere center 1
			scene.addElement(new TranslateElement("s1-t",true));
			scene.addElement(new RotateElement("s1-r",true));
//			scene.addElement(new SphereElement("s1",false));
			//box 2
			scene.addElement(new TranslateElement("b2-t",true));
			scene.addElement(new RotateElement("b2-r",true));
//			scene.addElement(new BoxElement("b2",false));
			
		} catch (Exception e) {
			Window.alert(e.getMessage());
		}
	}

	public native void startWebGlOverFile(int colorRed,int colorBlue) /*-{
		$wnd.HandUtil.COLOR_BLUE=colorBlue;
		$wnd.HandUtil.render(colorRed); 
	}-*/;
	
//		$wnd.alert($wnd.SceneJS._needFrame);
//	}-*/;
	public native void startWebGl() /*-{ 
    	$wnd.SceneJS.createNode({

		    type: "scene",
		
		    id: "theScene",
		
		    canvasId: "theCanvas",
		
		    loggingElementId: "theLoggingDiv",
		
		    nodes: [
		        {
		            type: "lookAt",
		            eye : { x: 0.0, y: 10.0, z: -15 },
		            look : { y:1.0 },
		            up : { y: 1.0 },
		
		            nodes: [
		                {
		                    type: "camera",
		                    optics: {
		                        type: "perspective",
		                        fovy : 25.0,
		                        aspect : 1.47,
		                        near : 0.10,
		                        far : 300.0
		                    },
		
		                    nodes: [
		
		                        {
		                            type: "light",
		                            mode:                   "dir",
		                            color:                  { r: 1.0, g: 0.5, b: 0.5 },
		                            diffuse:                true,
		                            specular:               true,
		                            dir:                    { x: 1.0, y: 1.0, z: -1.0 }
		                        },
		                        {
		                            type: "light",
		                            mode:                   "dir",
		                            color:                  { r: 0.5, g: 1.0, b: 0.5 },
		                            diffuse:                true,
		                            specular:               true,
		                            dir:                    { x: 0.0, y: 1.0, z: -1.0 }
		                        },
		                        {
		                            type: "light",
		                            mode:                   "dir",
		                            color:                  { r: 0.2, g: 0.2, b: 1.0 },
		                            diffuse:                true,
		                            specular:               true,
		                            dir:                    { x: -1.0, y: 0.0, z: -1.0 }
		                        },
		                        {
		                            type: "rotate",
		                            id: "pitch",
		                            angle: 0.0,
		                            x : 1.0,
		
		                            nodes: [
		                                {
		                                    type: "rotate",
		                                    id: "yaw",
		                                    angle: 0.0,
		                                    y : 1.0,
		
		                                    nodes: [
		
		                                        {
		                                            type: "material",
		                                            emit: 0,
		                                            baseColor:      { r: 0.9, g: 0.8, b: 0.4 },
		                                            specularColor:  { r: 0.9, g: 0.9, b: 0.9 },
		                                            specular:       0.9,
		                                            shine:          100.0,
		
		                                            nodes: [
		
		                                                {
		                                                    type: "translate",
		                                                    x:0.0,
		                                                    y:0.0,
		                                                    z:0.0,
		
		                                                    nodes : [
		                                                        {
		                                                            type: "scale", 
		                                                            x:1.0,
		                                                            y:1.0,
		                                                            z:1.0,
		
		                                                            nodes: [
																	{ 
		                                                                    type : "box",
																		    solid: true,
																		    xSize:2,
																		    ySize:2,
																		    zSize:0.5
		                                                                }, 
																	{
		                                                                    type : "sphere",
																		    radius: 1,
																		    slices:120,
																		    rings:120
		                                                                },
																	{ 
		                                                                    type : "translate",
																		    x:-2,
																		    y:2.3,
																		    z:0,
		
																		    nodes : [
																			{
																			    type : "sphere",
																			    radius: 0.7,
																			    slices:120,
																			    rings:120
																			}
																		    ]
		                                                                },
																		{
		                                                                    type : "translate",
																		    x:-2,
																		    y:3.3,
																		    z:0,
										
																		    nodes : [
																			{
																			    type : "sphere",
																			    radius: 0.6,
																			    slices:120,
																			    rings:120
																			}
																		    ]
		                                                                },
																		{
		                                                                    type : "translate",
																		    x:-2,
																		    y:4.3,
																		    z:0,
										
																		    nodes : [
																			{
																			    type : "sphere",
																			    radius: 0.6,
																			    slices:120,
																			    rings:120
																			}
																		    ]
		                                                                },
																		{
		                                                                    type : "translate",
																		    x:-0.8,
																		    y:2.3,
																		    z:0,
										
																		    nodes : [
																			{
																			    type : "sphere",
																			    radius: 0.7,
																			    slices:120,
																			    rings:120
																			}
																		    ]
		                                                                },
																		{
		                                                                    type : "translate",
																		    x:-0.8,
																		    y:3.3,
																		    z:0,
										
																		    nodes : [
																			{
																			    type : "sphere",
																			    radius: 0.6,
																			    slices:120,
																			    rings:120
																			}
																		    ]
		                                                                },
																		{
		                                                                    type : "translate",
																		    x:-0.8,
																		    y:4.3,
																		    z:0,
										
																		    nodes : [
																			{
																			    type : "sphere",
																			    radius: 0.6,
																			    slices:120,
																			    rings:120
																			}
																		    ]
		                                                                },
																		{
		                                                                    type : "translate",
																		    x:0.4,
																		    y:2.3,
																		    z:0,
										
																		    nodes : [
																			{
																			    type : "sphere",
																			    radius: 0.6,
																			    slices:120,
																			    rings:120
																			}
																		    ]
		                                                                },
																		{
		                                                                    type : "translate",
																		    x:0.4,
																		    y:3.3,
																		    z:0,
										
																		    nodes : [
																			{
																			    type : "sphere",
																			    radius: 0.5,
																			    slices:120,
																			    rings:120
																			}
																		    ]
		                                                                },
																		{
		                                                                    type : "translate",
																		    x:0.4,
																		    y:4.3,
																		    z:0,
										
																		    nodes : [
																			{
																			    type : "sphere",
																			    radius: 0.5,
																			    slices:120,
																			    rings:120
																			}
																		    ]
		                                                                },
																		{
		                                                                    type : "translate",
																		    x:1.6,
																		    y:2.1,
																		    z:0,
										
																		    nodes : [
																			{
																			    type : "sphere",
																			    radius: 0.6,
																			    slices:120,
																			    rings:120
																			}
																		    ]
		                                                                },
																		{
		                                                                    type : "translate",
																		    x:1.6,
																		    y:2.9,
																		    z:0,
										
																		    nodes : [
																			{
																			    type : "sphere",
																			    radius: 0.5,
																			    slices:120,
																			    rings:120
																			}
																		    ]
		                                                                },
																		{
		                                                                    type : "translate",
																		    x:1.6,
																		    y:3.5,
																		    z:0,
										
																		    nodes : [
																			{
																			    type : "sphere",
																			    radius: 0.4,
																			    slices:120,
																			    rings:120
																			}
																		    ]
		                                                                },
																		{
		                                                                    type : "translate",
																		    x:-2,
																		    y:-0.5,
																		    z:0,
										
																		    nodes : [
																			{
																			    type : "sphere",
																			    radius: 0.7,
																			    slices:120,
																			    rings:120
																			}
																		    ]
		                                                                },
																		{ 
		                                                                    type : "translate",
																		    x:-3,
																		    y:0,
																		    z:0,
										
																		    nodes : [
																			{
																			    type : "sphere",
																			    radius: 0.6,
																			    slices:120,
																			    rings:120
																			}
																		    ]
		                                                                },
																		{
		                                                                    type : "translate",
																		    x:-3.2,
																		    y:0.8,
																		    z:0,
										
																		    nodes : [
																			{
																			    type : "sphere",
																			    radius: 0.6,
																			    slices:120,
																			    rings:120
																			}
																		    ]
		                                                                }
		                                                            ]
		                                                        }
		                                                    ]
		                                                }
		                                            ]
		                                        }
		                                    ]
		                                }
		                            ]
		                        }
		                    ]
		                }
		            ]
		        }
		    ]
		});
		
		var yaw = 0;
		var pitch = 0;
		var lastX;
		var lastY;
		var dragging = false;
		
		$wnd.SceneJS.withNode("theScene").render();
		
		var canvas = document.getElementById("theCanvas");
		
		function mouseDown(event) {
		    lastX = event.clientX;
		    lastY = event.clientY;
		    dragging = true;
		}
		
		function mouseUp() {
		    dragging = false;
		}
		
		function mouseMove(event) {
		    if (dragging) {
		        yaw += (event.clientX - lastX) * 0.5;
		        pitch += (event.clientY - lastY) * -0.5;
		
		        SceneJS.withNode("yaw").set("angle", yaw);
		        SceneJS.withNode("pitch").set("angle", pitch);
		
		        SceneJS.withNode("theScene").render();
		
		        lastX = event.clientX;
		        lastY = event.clientY;
		    }
		}
		
		$wnd.canvas.addEventListener('mousedown', mouseDown, true);
		$wnd.canvas.addEventListener('mousemove', mouseMove, true);
		$wnd.canvas.addEventListener('mouseup', mouseUp, true);
	}-*/; 
}